<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search, Filter, ArrowDown } from '@element-plus/icons-vue'

// 发票列表列数据
const columns = [
    { title: '开票流水号', key: 'invoiceNo', sortable: true },
    { title: '开票抬头', key: 'invoiceTitle', sortable: true },
    { title: '开票金额', key: 'invoiceAmount', sortable: true },
    { title: '开票类型', key: 'invoiceType', sortable: true },
    { title: '开票状态', key: 'status', sortable: true },
    { title: '销售方', key: 'seller', sortable: true },
    { title: '发票号码', key: 'invoiceCode', sortable: true },
    { title: '开票时间', key: 'invoiceTime', sortable: true },
    { title: '申请人', key: 'applicant', sortable: true },
];

const mockData = ref([]);
const loading = ref(true);
const activeName = ref('all'); // 默认选中"全部"
const totalAmount = ref('0.00'); // 开票总金额

// 筛选表单数据
const filterForm = ref({
    invoiceTimeRange: [],
    invoiceType: '',
    status: '',
    seller: '',
    amountRange: [0, 0],
    applicant: ''
});

// 搜索关键词
const searchKeyword = ref('');

// 处理标签页切换
const handleTabChange = (tabKey) => {
    loading.value = true;
    activeName.value = tabKey;

    setTimeout(() => {
        // 按标签页加载对应数据
        switch (tabKey) {
            case 'all':
                mockData.value = [
                    {
                        invoiceNo: 'INV2023001',
                        invoiceTitle: '阿里科技有限公司',
                        invoiceAmount: 12000,
                        invoiceType: '增值税专用发票',
                        status: '已完成',
                        seller: '百度科技',
                        invoiceCode: '110023456789',
                        invoiceTime: '2023-10-01',
                        applicant: '张三',
                    },
                    {
                        invoiceNo: 'INV2023002',
                        invoiceTitle: '腾讯科技有限公司',
                        invoiceAmount: 8000,
                        invoiceType: '增值税普通发票',
                        status: '待确认',
                        seller: '百度科技',
                        invoiceCode: '110023456790',
                        invoiceTime: '2023-10-02',
                        applicant: '李四',
                    }
                ];
                break;
            case 'toSubmit':
                mockData.value = [];
                break;
            case 'toConfirm':
                mockData.value = [];
                break;
            case 'completed':
                mockData.value = [];
                break;
        }

        // 计算总金额
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 计算总金额
const calculateTotalAmount = () => {
    const total = mockData.value.reduce((sum, item) => sum + item.invoiceAmount, 0);
    totalAmount.value = total.toFixed(2);
};

// 筛选表单提交
const handleFilterSubmit = () => {
    loading.value = true;
    setTimeout(() => {
        // 这里添加实际筛选逻辑
        const filtered = [...mockData.value].filter(item => {
            // 开票类型筛选
            if (filterForm.value.invoiceType && !item.invoiceType.includes(filterForm.value.invoiceType)) return false;
            // 开票状态筛选
            if (filterForm.value.status && !item.status.includes(filterForm.value.status)) return false;
            // 销售方筛选
            if (filterForm.value.seller && !item.seller.includes(filterForm.value.seller)) return false;
            // 申请人筛选
            if (filterForm.value.applicant && !item.applicant.includes(filterForm.value.applicant)) return false;
            // 金额范围筛选
            if (filterForm.value.amountRange[0] > 0 || filterForm.value.amountRange[1] > 0) {
                if (item.invoiceAmount < filterForm.value.amountRange[0] || item.invoiceAmount > filterForm.value.amountRange[1]) {
                    return false;
                }
            }
            return true;
        });

        mockData.value = filtered;
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 重置筛选表单
const resetFilterForm = () => {
    filterForm.value = {
        invoiceTimeRange: [],
        invoiceType: '',
        status: '',
        seller: '',
        amountRange: [0, 0],
        applicant: ''
    };
    // 重新加载当前标签页数据
    handleTabChange(activeName.value);
};

// 搜索功能
const handleSearch = () => {
    if (!searchKeyword.value) {
        // 搜索为空时重新加载当前标签页数据
        handleTabChange(activeName.value);
        return;
    }

    loading.value = true;
    setTimeout(() => {
        const keyword = searchKeyword.value.toLowerCase();
        const filtered = mockData.value.filter(item => {
            return item.invoiceTitle.toLowerCase().includes(keyword) ||
                item.invoiceCode.toLowerCase().includes(keyword) ||
                item.invoiceNo.toLowerCase().includes(keyword);
        });
        mockData.value = filtered;
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 页面挂载时加载初始数据
onMounted(() => {
    handleTabChange('all');
});
</script>

<template>
    <div class="invoice-management">
        <!-- 顶部筛选区域 -->
        <div class="top-filter">
            <div class="top-filter-left">
                <!-- 筛选弹窗 -->
                <stick-popup>
                    <template #show>
                        <div class="filter-btn">
                            <div class="filter-btn-label">筛选</div>
                            <div class="filter-btn-icon">
                                <Filter />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="filter-form-container">
                            <el-form :model="filterForm" label-width="100px">
                                <!-- 开票时间 -->
                                <el-form-item label="开票时间:">
                                    <el-date-picker v-model="filterForm.invoiceTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 开票类型 -->
                                <el-form-item label="开票类型:">
                                    <el-select v-model="filterForm.invoiceType" placeholder="请选择">
                                        <el-option label="增值税专用发票" value="增值税专用发票"></el-option>
                                        <el-option label="增值税普通发票" value="增值税普通发票"></el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 开票状态 -->
                                <el-form-item label="开票状态:">
                                    <el-select v-model="filterForm.status" placeholder="搜索开票状态">
                                        <el-option label="待提交" value="待提交"></el-option>
                                        <el-option label="审核不通过" value="审核不通过"></el-option>
                                        <el-option label="待确认开票" value="待确认开票"></el-option>
                                        <el-option label="开票已完成" value="开票已完成"></el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 销售方 -->
                                <el-form-item label="销售方:">
                                    <el-select v-model="filterForm.seller" placeholder="搜索销售方">
                                        <el-option label="百度科技" value="百度科技"></el-option>
                                        <el-option label="阿里云计算" value="阿里云计算"></el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 开票金额 -->
                                <el-form-item label="开票金额:">
                                    <div class="amount-range">
                                        <el-input v-model.number="filterForm.amountRange[0]" placeholder="0.00"
                                            style="width: 45%;" />
                                        <span class="range-separator">到</span>
                                        <el-input v-model.number="filterForm.amountRange[1]" placeholder="0.00"
                                            style="width: 45%;" />
                                    </div>
                                </el-form-item>

                                <!-- 申请人 -->
                                <el-form-item label="申请人:">
                                    <el-select v-model="filterForm.applicant" placeholder="搜索申请人">
                                        <el-option label="张三" value="张三"></el-option>
                                        <el-option label="李四" value="李四"></el-option>
                                        <el-option label="王五" value="王五"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="filter-actions">
                            <el-button type="text" @click="resetFilterForm">重置</el-button>
                            <el-button type="primary" @click="handleFilterSubmit">查询</el-button>
                        </div>
                    </template>
                </stick-popup>

                <!-- 搜索框 -->
                <div class="search-box">
                    <el-input v-model="searchKeyword" placeholder="请输入开票抬头或发票号码或开票流水" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="top-filter-right">
                <el-button type="primary">
                    申请开票
                    <ArrowDown class="btn-icon" />
                </el-button>
                <el-button type="primary">
                    批量操作
                    <ArrowDown class="btn-icon" />
                </el-button>
                <el-button type="primary">导出</el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <!-- 状态标签页 -->
            <div class="status-tabs">
                <el-tabs v-model="activeName" @tab-click="(tab) => handleTabChange(tab.name)" stretch>
                    <el-tab-pane label="全部" name="all"></el-tab-pane>
                    <el-tab-pane label="待提交/审核不通过(0)" name="toSubmit"></el-tab-pane>
                    <el-tab-pane label="待确认开票(0)" name="toConfirm"></el-tab-pane>
                    <el-tab-pane label="开票已完成(0)" name="completed"></el-tab-pane>
                </el-tabs>

                <!-- 开票总金额 -->
                <div class="total-amount">
                    开票金额: <span class="amount-value">{{ totalAmount }}</span>
                </div>
            </div>

            <!-- 发票表格 -->
            <div class="invoice-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true"
                    :show-selection="true">
                    <!-- 金额格式化 -->
                    <template #data-invoiceAmount="scope">
                        ¥{{ scope.data.invoiceAmount.toFixed(2) }}
                    </template>
                </my-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.invoice-management {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-bottom: 20px;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;

    .top-filter-left {
        display: flex;
        align-items: center;
        gap: 15px;

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 15px;
            height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
        }

        .search-box {
            width: 300px;
        }
    }

    .top-filter-right {
        display: flex;
        gap: 10px;

        .btn-icon {
            margin-left: 5px;
            font-size: 14px;
        }
    }
}

.table-container {
    width: calc(100% - 40px);
    margin: 20px auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;

    .status-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .total-amount {
            color: #606266;
            font-size: 14px;
            font-weight: 500;

            .amount-value {
                color: #ff4d4f;
                font-weight: bold;
            }
        }
    }

    .invoice-table {
        width: 100%;
        overflow-x: auto;
    }
}

.filter-form-container {
    padding: 15px;
    width: 400px;

    .el-form-item {
        margin-bottom: 15px;
    }

    .amount-range {
        display: flex;
        align-items: center;
        gap: 10px;

        .range-separator {
            color: #606266;
        }
    }
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}
</style>